<template>
	<view class="orderList">
		<view class="tab">
			<view class="tab-item" :class="tabIndex==0?'active':''"  @click="chgTab(0)">全部 <view :class="tabIndex==0?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==1?'active':''"  @click="chgTab(1)">待付款 <view :class="tabIndex==1?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==2?'active':''"  @click="chgTab(2)">已报名 <view :class="tabIndex==2?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==3?'active':''"  @click="chgTab(3)">退款 <view :class="tabIndex==3?'active':''"></view></view>
		</view>
		<scroll-view :refresher-triggered=refresherTriggered :refresherThreshold=refresherThreshold
			@refresherrefresh='refresherrefresh()' refresher-background="#FFFFFF"  @scrolltolower='nextPage()'
			 
			 lower-threshold="500" class="" scroll-y :style="{height: orderHeight+'px'}">
		<view v-if="!isNull" class="courseList">
			<view v-for="itm in orderList" style="background-color: white;margin-top:10px;"  @click="goDetail(itm.ordersNumber)">
				<view class="header">
					<view>订单时间：{{itm.createTime | dateFormatYear}}</view>
					<view>订单号：{{itm.ordersNumber}}</view>
				</view>
				<view class="content">
					<image :src='itm.classImage' class="thumb" mode="widthFix"></image>
					<view style="width:80%;margin-left:10px;">
						<view class="title">{{itm.className}}</view>
						<view class="detail"><text style="color:#666666">老师：{{itm.teacherName}}</text>
						<text class="colorOrange" style="font-size: 28rpx;font-weight: bold;">￥{{itm.classPrice}}</text></view>
					</view>
				</view>
				<view class="footer">
					<view class="status" style="color: #FF5551;" v-if="itm.status===0&&itm.failStatus===0">已报名</view>
					<view class="status" style="color: #FF7E51;" v-if="itm.status===1">待付款</view>
					<view class="status" style="color: #31a7ff;" v-if="itm.status===9">退款</view>
					<view class="status" style="color: #31a7ff;" v-if="itm.status===0&&itm.failStatus===1">退款中</view>
					<view class="status" style="color: #31a7ff;" v-if="itm.status===0&&itm.failStatus===2">退款失败</view>
					<view class="status" style="color: #31a7ff;" v-if="itm.status===0&&itm.failStatus===3">退款成功</view>
					<view class="status" style="color: #999999;" v-if="itm.status===2">订单已取消</view>
					<view class="btn">查看详情</view>
				</view>
			</view>
		</view>
		<view v-if="isNull" class="order_null">
			<image src="../../static/null/order_null.png"></image>
			<text>暂时还没有订单~</text>
			<button class="btn-shop-list" @tap='shopList()'>去逛逛</button>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isNull:false,
				hasNextPage:false,
				orderList:[],
				pageNum:1,
				pageSize:10,
				tabIndex:'',
				shopId:'',
				orderHeight:400,
				order:[{
					'time':'2021-06-29 14:15',
					'order_id':'288077882',
					'title':'书法班',
					'teacher':'陈松',
					'point':'200',
					'thumb':'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/2.png',
					'status':'1',   //0:待付款   1:已报名
				},{
					'time':'2021-06-29 14:15',
					'order_id':'288077882',
					'title':'线上书法班',
					'teacher':'陈松',
					'point':'200',
					'thumb':'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/1.png',
					'status':'0',   //0:待付款   1:已报名
				}]
			}
		},
		onLoad() {
				this.shopId = uni.getStorageSync('shopId')
				this.chgTab(0)
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(110) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onShow() {
			let carData = ''
			let _this = this
			uni.$on("carData", (rel) => {
				carData = rel
				if (carData == 1) {
					console.log(carData)
					_this.chgTab(carData)
				} else if(carData == 3){
					_this.chgTab(carData)
				}else if(carData == 2){
					_this.chgTab(carData)
				}
			})
		
		},
		methods: {
			shopList(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			chgTab(index){
				this.tabIndex = index;
				if(index==0){
					this.payState = ''
					this.getOrderList('')
				}else if(index==1){
					this.payState = 1
					this.getOrderList(1)
				}else if(index==2){
					this.payState = 0
					this.getOrderList(0)
				}else if(index==3){
					this.payState = 9
					this.getOrderList(9)
				}
				//TODO:::加载数据
			},
			goDetail(ordersNumber){
				uni.navigateTo({
					url:"order_detail?ordersNumber="+ordersNumber
				})
			},
			nextPage() {
				let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.getClassOrdersList({
						status: this.payState,
						shopId:_this.shopId
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							// console.log("-----"+JSON.stringify(this.orderList))
							for (var i = 0; i < res.data.dataMap.list.length; i++) {
								this.orderList.push(res.data.dataMap.list[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
			
						}
					})
				}
			
			},
			//获取订单列表
			getOrderList(payState) {
				this.orderList = []
				this.pageNum = 1
				let _this = this
				this.$api.getClassOrdersList({
					status: payState,
					shopId:_this.shopId
				}, _this.pageNum,_this.pageSize).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						_this.orderList = res.data.dataMap.list
						for(var i = 0;i < res.data.dataMap.list.length;i++){
							_this.orderList[i].createTime = _this.renderTime(_this.orderList[i].createTime)
						}
						
						_this.isNull = _this.orderList.length < 1 ? true : false
						_this.hasNextPage = res.data.dataMap.hasNextPage
					}
				})
			},
			// 时间转换
			renderTime(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/,
					'')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderList{
		background-color: #F8F8F8;
	}
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		color: #c8c8c8;
	}
	
	.order_null image {
		margin: 60rpx auto;
		width: 300rpx;
		height: 300rpx;
	}
	.btn-shop-list {
		background-color: #FF5551;
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}
	page{background: #F8F8F8;}
.tab{
  	 display: flex;
	 background-color: white;
  	 justify-content: space-around;
	 padding:15px 15px 0px 15px;
  	 .active{font-weight: bold;}
  	 .tab-item{
		 font-size: 28rpx;
  		 border-bottom: 5px solid white;
  		 .active{
  		   	background:linear-gradient(90deg, rgb(255,228,106), rgb(249,155,68));
  		   	border-radius: 20rpx;
  		   	margin:auto;
  		   	margin-top:5px;
  		   	height:5px;
  		   	width:60%;}
  		 }
  }
  
  .courseList{
	  .header{display: flex;justify-content: space-between;color:#666666;padding:10px;}
	  .content{display: flex;
	     padding:5px 10px;
	     .thumb{border-radius: 5px;width:180rpx;height: 115rpx !important;}
		 .title{font-size: 28rpx;font-weight: bold;}
		 .detail{display: flex;justify-content: space-between;margin-top:20px;}
	  }
	  .footer{display: flex;justify-content: space-between;padding:10px;border-top:1px solid #EEEEEE;
	   align-items: center;
	   .btn{
		   border:1px solid #CCCCCC;
		   color: #333333;
		   padding: 5px 10px;
		   border-radius: 10rpx;
	   }  
	   .status{font-weight: bold;}
	 }
	  
  }
</style>
